<template>
  <view
    class="nav"
    :style="{
      background: color,
    }"
  >
    <view class="nav-title">
      <image
        @click="goBack"
        class="nav-arrows"
        :src="require('@/static/img/arrows-left.png')"
      ></image>
      <text class="nav-title-text">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "标题",
    },
    color: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 268rpx;
  opacity: 1;
  padding-top: 103rpx;
  background: linear-gradient(
    180deg,
    #1ac678 0%,
    #51d499 16%,
    #81e0b5 33%,
    #b7edd5 53%,
    #ffffff 100%
  );
  &-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 32rpx;
    &-text {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #202020;
    }
  }
  &-arrows {
    width: 16rpx;
    height: 26rpx;
  }
}
</style>
